<template>
    <view class="content">		
		<view class="uni-form-item uni-column">
			<view class="title">视频标题：</view>
			<multi-input type="text" focus clearable v-model="title" placeholder="请输入标题"></multi-input>
		</view>
		<view class="uni-common-mt">
			<view class="uploadArea">
				<block v-if="video">
					<view class="uni-list">
						<view class="uni-list-cell uploadItem" hover-class="uni-list-cell-hover">
							<view class="uni-triplex-row">
								<view class="uni-triplex-left">
									<view class="uni-media-list uploadWrap">
										<view class="uni-media-list-logo videoImg">
											<view class="uni-icon uni-icon-videocam"></view>
										</view>
										<view class="uni-media-list-body">
											<view class="uni-media-list-text-top">文件大小：<text>{{fileSize}}</text></view>
											<view class="uni-media-list-text-bottom uni-ellipsis">
												<view v-if="uploading" class="progress-box">
													<progress :percent="uploadPercent" show-info stroke-width="3" />
												</view>
												<view v-else>等待上传</view>
											</view>
										</view>
									</view>
								</view>
								<view class="uni-triplex-right delWrap">
									<view class="uni-icon uni-icon-close delBtn" @tap="delChoosen"></view>
								</view>
							</view>
							<video :src="video.tempFilePath" class="video"></video>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="addFile" @click="chooseVideo">
						<view class="uni-icon uni-icon-plus"></view><br/>
						选择视频
					</view>
				</block>
			</view>
		</view>
        <view class="btn-row">
            <button type="primary" class="primary" :loading="loading" @tap="toSubmit" :disabled="btnDisabled">确认提交</button>
        </view>
    </view>
</template>

<script>
	import store from '@/vuex'
	import multiInput from '../../components/multiInput.vue'
	import {changeByte,formatDateTime} from '../../common/util.js'
	
	export default {
		components: {
			multiInput
		},
		data() {
			return {
				title: '',
				video: null,
				fileSize: '',
				uploading: false,
				uploadPercent: 0,
				btnDisabled: false
			}
		},
		computed:{
			loading:{
				get () {
				  return store.getters.getLoadingStatus
				},
				set (value) {
				  store.commit('updateLoadingStatus', value)
				} 
			},
			data:{
				get () {
				  return store.getters.getData
				},
				set (value) {
				  store.commit('updateData', value)
				} 
			}
		},
		methods: {
			toSubmit(){
				this.loading = true
				if(this.title == ''){
					uni.showToast({title: '请填写视频标题',icon: 'none'})
					this.loading = false
					return;
				}
				if(!this.video){
					uni.showToast({title: '请选择上传视频',icon: 'none'})
					this.loading = false
					return;
				}
				if(this.video.size > 104857600){
					uni.showModal({
						content: '你选择的视频超过最大上传量：100MB',
						showCancel: false,
					})
					this.loading = false
					return;
				}
				uni.showLoading({title: '上传中...',mask:true});
				let filename = formatDateTime(new Date(),'yyyyMMddHHmm')
				const uploadTask = uni.uploadFile({
					url: this.data.server + 'loadMedia',
					filePath: this.video.tempFilePath,
					fileType:'video',
					name: 'file',
					formData: {
						'name': this.title,
						'filename': filename
					},
					success: (res) => {
						this.loading = false
						console.log('视频文件 “' + this.title + '” 上传' + (JSON.parse(res.data).result == 0 ? '成功' : '失败') + '：');console.log(JSON.stringify(res))
						uni.showModal({
							content: '视频文件 “' + this.title + '” 上传' + (JSON.parse(res.data).result == 0 ? '成功' : '失败'),
							showCancel: false,
						})
						uni.hideLoading()
						this.btnDisabled = true
						let insertObj = {
								"key": filename,
								"label": this.title,
								"memo": "",
								"img": 'default.png'
							}
						this.data.switch[0].marquee.unshift(insertObj)
						/* uni.reLaunch({
						    url: '../index/index'
						}); */
					},
					fail: (err) => {
						this.loading = false
						uni.hideLoading();
						console.log('上传文件失败：');console.log(JSON.stringify(err))
						uni.showModal({
							content: err.data != '' ? err.data.message : '上传失败',
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.uploading = true
					this.uploadPercent = res.progress
					console.log('上传进度' + this.uploadPercent);
				});
			},
			chooseVideo(){
				uni.chooseVideo({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(JSON.stringify(res));
						console.log('选择视频临时路径：');console.log(res.tempFilePath)
						this.video = res
						this.fileSize = changeByte(this.video.size)
					},
					fail: (err) => {
						console.log('选择视频文件失败');console.log(JSON.stringify(err))
					}
				})
			},
			delChoosen(){
				uni.showModal({
					content: '是否确认删除',
					success: (res) => {
						if (res.confirm) {
							this.video = null
						}
					}
				});
			}
		},
		onUnload() {
			this.video = null;
		},
        onReady() {
			
        }
	}
</script>

<style lang="scss">
	.content {
		padding: 20upx;
	}
	.uploadArea {
		background: #FFF;
		padding: 30upx 20upx;
		.uploadItem{
			display: block;
			.uploadWrap{
				padding: 0;
				.videoImg {
					background: #E9E9E9;
					text-align: center;
					.uni-icon{font-size: 70upx;line-height: 85upx;color: #b5b5b5;}
				}
			}
			.delWrap{
				.delBtn{margin-top: 20upx;}
			}
			.video{width: 100%;}
		}
		.addFile{
			text-align: center;
			.uni-icon{font-size: 120upx;color: #b5b5b5;}
		}
	}
	.btn-row {
		margin-top: 50upx;
	}
	button.primary {
		background-color: #0faeff;
	}
</style>
